<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引入远程vue.js使用 </title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>


    <!-- 生产环境版本，优化了尺寸和速度 -->
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->

</head>
<body>
    <h1>引入远程vue.js使用</h1>

    <div id="app">
        <!-- 差值语法 -->
        {{ message }}
    </div>

    <div id="app2">
        <!-- 指令，绑定标签属性 -->
        <span v-bind:title="message">
            鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
        <br>
        <input type="text" name="" id="" v-model:value="name">
    </div>


    <div id="app3">
        <p v-if="seen">看到我</p>
    </div>


<script>
    // 声明式编程
    var app = new Vue({
        el:'#app',
        data: {
            message: 'Hello Vue2'
        }
    })

    var app2 = new Vue({
        el: '#app2',
        data: {
            message: '页面加载于' + new Date().toLocaleString(),
            name: "lanlang"
        }
    })

    
    var app3 = new Vue({
        el: '#app3',
        // 编程式
        // data: function() {
        //     return {
        //         seen: true
        //     }
        // }
        // 简写 --》 去除冒号和function关键词， 需要返回一个函数（使用return）
        data(){
            return {
                seen: true
            }
        }
        // data: {
        //     seen: true
        // }
    })


</script>



</body>
</html>